<template>
	<view class="app app-bg">
		<view class="card" v-if="pageIndex === 0">
			<view>
				{{ $t("setting.please-enter") }} {{ $fn.hidden(form1.mobile, 3, 4) }}
				{{ $t("setting.sms-verification-code") }}
			</view>
			<u-form-item prop="code">
				<u-input
					v-model="form1.code"
					type="number"
					:placeholder="$t('setting.please-enter-sms-verification-code')"
				/>
				<vk-data-verification-code
					custom-style="font-size:24rpx;color:#606266"
					type="reset-pwd"
					seconds="60"
					slot="right"
					:mobile="form1.mobile"
				/>
			</u-form-item>
			<view class="btn" @click="next(1)">{{ $t("setting.next-step") }}</view>
		</view>
		<view class="card" v-else-if="pageIndex === 1">
			<u-form-item :label="$t('setting.set-password')" prop="password" label-width="150">
				<u-input v-model="form1.password" type="password" :password-icon="true" />
			</u-form-item>
			<view class="btn" @click="resetPasswordByMobile">{{ $t("system.confirm") }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		// 页面数据变量
		return {
			pageIndex: 0,
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				mobile: "",
				code: "",
				password: ""
			},
			scrollTop: 0
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(options = {}) {
		this.options = options
		this.init(options)
	},
	methods: {
		// 页面数据初始化函数
		init(options) {
			this.form1.mobile = vk.getVuex("$user.userInfo.mobile")
			uni.setNavigationBarTitle({
				title: this.$t("page.modify-login-password")
			})
		},
		pageTo(path) {
			vk.navigateTo(path)
		},
		next(pageIndex) {
			let that = this
			setTimeout(() => {
				that.pageIndex = pageIndex
			}, 300)
		},
		// 手机验证码充值账号密码
		resetPasswordByMobile() {
			let that = this
			vk.userCenter.resetPasswordByMobile({
				data: that.form1,
				success: data => {
					vk.alert(
						that.$t("setting.pssword-reset-succeeded") + that.form1.password,
						() => {
							vk.navigateToLogin()
						}
					)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.card {
	padding: 30rpx;
	background-color: #ffffff;
}
.btn {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 70rpx;
	margin: 40rpx auto;
	background-color: var(--main);
	border-radius: 70rpx;
	box-shadow: 0 10rpx 10rpx var(--main);
}
.btn:active {
	filter: grayscale(50%);
}
</style>
